<template>
	<view style="padding-bottom: 200upx;">
		<Header :showBack="true" title="商品详情" bgColor="#ace8f6"></Header>
		<view class="box">
			<image v-if="info.prImgUrl" :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + info.prImgUrl" mode="widthFix"></image>
			
			<view class="box-details">
				<view class="box-details-top">
					<view class="box-details-name">{{info.prName}}</view>
					<view class="box-details-price"> <text style="font-size: 34upx;">￥</text> {{info.prRetailPrice}}</view>
				</view>
				<view class="box-details-desc">{{info.prDescription?info.prDescription:"商家很懒，没有留下描述~"}}</view>
				
			</view>
			
			<view class="details">
				<view class="details-title">
					<view class="line"></view>
					<view class="title">详情图</view>
					<view class="line"></view>
				</view>
				<block v-for="(item,index) in imgList" :key='index'>
					<img class="img" :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item" alt="" mode="widthFix">
				</block>
			</view>
		</view>
		<view class="addShopCar">
			<view @click="toShopCar">
				<image src="../../static/gouwuche.png" mode=""></image>
				<view v-if="num>0">
					{{num}}
				</view>
			</view>
			
			<view @click="addShopCar" style="background: linear-gradient(to right, #F72F18, #FA6018);">
				加入购物车
			</view>
		</view>
		
		<registPop ref="registPop"></registPop>
			
	</view>
</template>

<script>
	
	import commonMinxi from "@/commom/commonMixin.js"
	import registPop from "@/component/registPop"
	
	export default {
		data() {
			return {
				baseUrl:getApp().globalData.baseUrl,
				info:{},
				num:0,
				imgList:[]
			}
		},
		onLoad(e) {
			this.getInfo(e.id)
			this.getShopCar()
		},
		mixins: [commonMinxi],
		components: {
			registPop
		},
		methods: {
			getShopCar(){
				let token = uni.getStorageSync("token")
				if(token){
					this.$http('/common/api/shopingCart/getOwnerList',{},res=>{
						this.num = res.data.items.length
					})
				}
				
			},
			toShopCar(){
				this.validationLogin({
					success:() => {
						uni.navigateTo({
							url:'/pages/shopCar/shopCar'
						})
					},
					regist:() => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
			},
			addShopCar(){
				
				this.validationLogin({
					success:() => {
						this.$http('/common/api/shopingCart/add',{
							"productId":this.info.id,
							"quantity":1
						},res=>{
							uni.$emit("shopCarHandle")
							uni.showToast({
								icon:'none',
								title:'加入购物车成功'
							})
							this.getShopCar()
						})
					},
					regist:() => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
			},
			getInfo(id){
				this.$http('/common/api/commonData/getProduct?id='+id,{},res=>{
					this.info = res.data
					if(res.data.prDetailImgUrl && res.data.prDetailImgUrl.length > 0){
						this.imgList = res.data.prDetailImgUrl.split(',')
					}
					
				},'POST')
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	>image{
		width: 100%;
		height: auto;
	}
	
	.box-details{
		width: 710rpx;
		margin: 0 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		border-radius: 23rpx 23rpx 0 0 ;
		
		.box-details-top{
			box-sizing: border-box;
			padding:20rpx 20rpx 0rpx 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.box-details-name{
				font-size: 38rpx;
				color: #646566;
				font-weight: 900;
			}
		}
		
		
		.box-details-desc{
			font-size: 32upx;
			min-height: 60upx;
			line-height: 60upx;
			padding-left: 20upx;
			color: #999999;
		}
		.box-details-price{
			padding-left: 20upx;
			font-weight: 600;
			font-size: 36upx;
			min-height: 80upx;
			line-height: 80upx;
			color: #FF524D;
		}
	}
	
}
.addShopCar{
	position: fixed;
	bottom: 0;
	width: 100%;
	// height: 180upx;
	height: 140upx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #f1f1f1;
	box-sizing: border-box;
	padding: 15upx 20upx 0 40upx;
	>view:first-child{
		width: 70upx;
		height: 70upx;
		position: relative;
		>image{
			width: 70upx;
			height: 70upx;
		}
		>view{
			width: 25upx;
			height: 25upx;
			font-size: 20upx;
			text-align: center;
			line-height: 25upx;
			color: #FFFFFF;
			background-color: #DD524D;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	>view:last-child{
		width: 240upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #5ECC6C;
		color: #FFFFFF;
		font-weight: 300;
		font-size: 28upx;
		text-align: center;
	}
}
.details{
	padding-left: 0!important;
	.details-title{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c2c2c2;
		padding: 26upx 0;
		.line{
			width: 120upx;
			height: 4upx;
			background: #c2c2c2;
		}
		.title{
			font-size: 32upx;
			margin: 0 44upx;
		}
	}
	.img{
		vertical-align: middle;
		width: 710rpx;
		margin-left: 20rpx;
		border-radius: 13rpx;
	}
}
</style>
